<template>
  <div style="font-size: 32px; margin-bottom: 50px; text-align: center">图表</div>
  <el-card>
    <div id="main" style="height:400px;"></div>
  </el-card>

</template>

<script>
import echarts from 'echarts'
import _ from 'lodash'
export default {
  name: "data",
  data() {
    return {
      option: {
        title: {
          text: '新冠疫情数据'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // legend: {
        data: ['销量']
      },
      xAxis: {
        // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

      },
      yAxis: {

      },
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    }

  },
  created() {
  },
  async mounted() {
    let echarts = require('echarts')
    let myChart = echarts.init(document.getElementById('main'));
    const res = await this.$axios.get('https://route.showapi.com/2217-5?showapi_appid=728242&showapi_sign=e58b3ff6ab2441f69a32f5fedfc7faca')

    const data = res.data.showapi_res_body.foreignList.slice(0,15)
    let areaName = []
    data.forEach(item => {
      // console.log(item['areaName'])
      areaName.push(item['areaName'])
    });
    let currentConfirmedNum = []
    data.forEach(
        item =>{
          currentConfirmedNum.push(item['currentConfirmedNum'])
        }
    )
    // print(areaName,currentConfirmedNum)
    console.log(areaName,currentConfirmedNum)
    var option = {
      title: {
        text: '新冠疫情数据'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#E9EEF3'
          }
        }
      },
      legend: {
        data:['疫情数据']
      },
      xAxis: {
        data: areaName
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'line',
        data: currentConfirmedNum
      }]
    };
    console.log(data)
    myChart.setOption(option);
  },
  methods:{

  }

}
</script>

<style scoped>

</style>
